<script setup lang="ts">
import ctfScore from "@/api/CtfScore";
const contestId = defineModel();

const scoreData = ref<any>(null);
const contestName = ref<string>("");

// 调用接口获取得分记录
const fetchScores = async () => {
  ctfScore.getScore(contestId.value).then((response) => {
    // 将获取到的数据存储到 scoreData 中
    scoreData.value = response.data;
    // 获取第一个条目的比赛名称作为标题
    if (scoreData.value && scoreData.value.length > 0) {
      contestName.value = scoreData.value[0].contest.contestName;
    }
    // 在控制台打印数据
    console.log(scoreData.value);
  });
};

// 在适当的地方调用 fetchScores，例如在 onMounted 钩子中
onMounted(() => {
  fetchScores();
  console.log("查询了");
});

// 定义 sortedRankList
const sortedRankList = computed(() => {
  if (!scoreData.value || !scoreData.value.length) return null;

  return scoreData.value.map((item: any, index: number) => ({
    rank: index + 1,
    userName: item.user.userName,
    totalScore: item.score.totalScore,
  }));
});
</script>

<template>
  <div
    class="rank-container"
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    "
  >
    <h1>{{ contestName }}考试成绩单</h1>
    <table class="rank-table">
      <thead>
        <tr>
          <th>排名</th>
          <th>用户名</th>
          <th>总分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in sortedRankList" :key="index">
          <td>{{ item.rank }}</td>
          <td>{{ item.userName }}</td>
          <td>{{ item.totalScore }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.rank-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1rem;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
}

.rank-table th,
.rank-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

.rank-table th {
  /* background-color: #f2f2f2; */
}
</style>
